import React, {
  HtmlHTMLAttributes,
  memo,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react'
import { Carousel } from 'antd'
import './style.less'
import { fetchBanner } from '../../../../api/discover'
import { getCurBannerBgImage } from '../../../../utils'

const Slider = () => {
  const [bannerList, setBanner] = useState<any[]>([])
  const [curIdx, setCurIdx] = useState<number>(0)
  const bannerRef = useRef<HTMLElement | any>()
  useEffect(() => {
    console.log('rs')
    fetchBanner().then((res: any) => {
      if (res.banners) {
        setBanner(res.banners)
      }
    })
  }, [])

  const bannerChange = useCallback((num1: number, num2: number) => {
    setCurIdx(num2)
  }, [])
  const currentBgImgStyle = getCurBannerBgImage(bannerList[curIdx]?.imageUrl)
  // prev() next
  return (
    <div className="banner" style={currentBgImgStyle}>
      <div className="w980 container">
        <div className="left-banner">
          <Carousel ref={bannerRef} autoplay beforeChange={bannerChange}>
            {bannerList.length
              ? bannerList.map((v) => (
                  <div className="image-wrap" key={v.targetId}>
                    <img src={v.imageUrl} alt="" />
                  </div>
                ))
              : null}
          </Carousel>
        </div>
        <div className="right-download">
          <div className="down-load down">
            <a href="javascript:;" className="btn down-load"></a>
          </div>
          <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </div>
      </div>
    </div>
  )
}
export default memo(Slider)
